<template>

  <div>
    <!-- Breadcrumb 面包屑 导航区-->
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">故障管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>故障列表</el-breadcrumb-item>
    </el-breadcrumb> -->
    <!-- Card 卡片 卡片视图区-->
    <el-card class="box-card">
      <div>
        <el-date-picker
          v-model="queryInfo.m"
          value-format="yyyy-MM-dd"
          type="month"
          placeholder="选择月"
        />
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <!-- 表格区-->
      <el-table :data="dataList" border stripe>
        <el-table-column type="index" />
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="createTime" label="提交日期" />

        <el-table-column label="操作">
          <!-- 操作模板-->
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="showDialog(scope.row.id)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域-->
      <el-pagination
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 周报详细信息的对话框-->

    <el-dialog
      title="查看故障"
      :visible.sync="DialogVisible"
      width="80%"
      @close="DialogClosed"
    >
      <div>查看编号为{{ form.id }} 的故障信息</div>
      <el-form>
        <el-form-item label="标题：">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="内容：">
          <el-input v-model="form.content" type="textarea" :autosize="{ minRows: 8, maxRows: 16}" />
        </el-form-item>
        <el-form-item label="发射台：" style="text-align: left;">
          {{ form.fstName }}
        </el-form-item>
        <el-form-item label="相片：" style="text-align: left;">

          <div v-for="pic in pics" :key="pic" class="block">

            <el-image
              style="width: 100px; height: 100px"
              :src="pic"
              fit="fill"
              :preview-src-list="pics"
            />
          </div>
        </el-form-item>
        <el-form-item label="视频：">
          <video v-if="this.form.shipin !== ''" :src="form.shipin" controls="controls" width="320" height="240">
            您的浏览器不支持 video 标签。
          </video>

        </el-form-item>
        <el-form-item label="上报人：" style="text-align: left;">
          {{ form.name }}
        </el-form-item>
        <el-form-item label="上报日期：" style="text-align: left;">
          {{ form.createTime }}
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      DialogVisible: false, // 查看对话框显示与隐藏
      dataList: [], // 故障列表
      total: 0, // 总共有多少条数据
      form: {}, // 详细信息
      pics: [], // 相片
      queryInfo: {
        // query: '',
        pagenum: 1, // 当前页码数
        pagesize: 5, // 当前每页有多少条
        m: null // 月份
      }
    }
  },
  created() {
    this.getfaultData()
  },

  methods: {
    async getfaultData() {
      console.log(this.queryInfo)
      const { data: res } = await this.$post('news/get_list', this.queryInfo)

      if (res.code !== 200) return this.$message.error('获取数据失败' + res.message)
      this.dataList = res.data.records
      this.total = res.data.total
    },
    DialogClosed() { // 关闭窗口
      this.DialogVisible = false
    },
    async showDialog(id) { // 显示查看
      // 获取故障详细信息
      const { data: res } = await this.$post('news/detail', { id: id })
      console.log(res.data)
      if (res.code !== 200) {
        return this.$message.error('读取信息失败')
      }
      this.form = res.data.news
      const dataStr = res.data.news.imgs// 原始字符串
      const dataStrArr = dataStr.split(',')// 分割成字符串数组
      const dataIntArr = []// 保存转换后的整型字符串
      dataStrArr.forEach(function(data, index, arr) {
        dataIntArr.push(+data)
      })
      this.pics = dataStrArr // 预览图片列表

      this.DialogVisible = true
    },
    handleSearch() { // 搜索
      this.getfaultData()
    },
    // 监听分页数量设置
    handleSizeChange(newsize) {
      console.log(newsize)
      console.log(this.queryInfo.pagesize)
      this.queryInfo.pagesize = newsize
      this.getfaultData()
    },
    // 监听页码值改变
    handleCurrentChange(newpage) {
      console.log(newpage)
      this.queryInfo.pagenum = newpage
      this.getfaultData()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
